<!--
@fucntion: 关联
-->
<template>
  <div class="components-system-EquipmentFeeLtems">
    <el-row style="height:100%;">
      <el-col style="height:100%;" :xs="24" :sm="24" :md="12" :lg="12">
        <table-panel :name="'设备信息'" 
        v-show="SwitchingPoint"
        :columns="EquipmentColumns" 
        :tableData="EquipmentData" 
        :showRowNumber="true" 
        :currentPage="EquipmentCurrentPage" 
        :totalNum="EquipmentTotalNum" 
        :candetails="authorities.details"
        @page-change="onPageChange('Equipment',$event)" 
        :pageSize="pageSize"
        @table-details="ondetails('Department',$event)"
        @table-searching="onSearching('Equipment',$event)"
        @current-change="onSelectionChange('Equipment',$event)">
        </table-panel>
        <el-col v-show="!SwitchingPoint">
          <el-card style="background-color: #DCDFE6;"> 
            <span style="font-weight:bold;">设备信息详情</span>
            <el-button plain size="mini" style="float:right" 
              @click="SwitchingPoint = !(SwitchingPoint);">返回
            </el-button> 
          </el-card>
          <el-form ref="DetailedData" 
          :model="DetailedData" 
          label-position="right" 
          label-width="105px" 
          size="mini" 
          status-icon>
          <el-card style="width: 100%;height:100%;">
            <el-card>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="设备名称">
                    <el-input  v-model="DetailedData.SBMC" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="装备时间">
                    <el-input  v-model="DetailedData.ZBSJ" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="保修时间">
                    <el-input  v-model="DetailedData.BXSJ" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="责任人">
                    <el-input  v-model="DetailedData.ZRR" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="放置地点">
                    <el-input  v-model="DetailedData.FZDD" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="维修工程师">
                    <el-input  v-model="DetailedData.WXGCS" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="维修工程师2">
                    <el-input  v-model="DetailedData.WXGCS2" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="仪器编号">
                    <el-input  v-model="DetailedData.YQBH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="固定资产编号">
                    <el-input  v-model="DetailedData.GDZCBH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="医院档案号">
                    <el-input  v-model="DetailedData.YDAH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="资产管理部档案号">
                    <el-input  v-model="DetailedData.BDAH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="部门编号">
                    <el-input  v-model="DetailedData.BMBH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="厂牌">
                    <el-input  v-model="DetailedData.CP" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="规格型号">
                    <el-input  v-model="DetailedData.GGXH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="单价">
                    <el-input  v-model="DetailedData.DJ" :readonly="true"><template slot="append">￥</template></el-input>
                  </el-form-item>
                <el-form-item label="有效否">
                    <el-switch
                      v-model="DetailedData.YXF"
                      disabled
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="图片">
                      <img style="width: 150px; height: 150px" :src="url">
                  </el-form-item>
                  <el-form-item label="设备状态">
                    <el-input  v-model="DetailedData.SBZT" :readonly="true"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="二维码路径">
                    <el-input  v-model="DetailedData.ERWEIMAPATH" :readonly="true"></el-input>
                  </el-form-item> -->
                  <el-form-item label="售后联系人">
                    <el-input  v-model="DetailedData.SHLXR" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="售后联系电话">
                    <el-input  v-model="DetailedData.SHLXDH" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="产地厂家">
                    <el-input  v-model="DetailedData.CDCJ" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="*原值">
                    <el-input  v-model="DetailedData.YZ" :readonly="true"><template slot="append">￥</template></el-input>
                  </el-form-item>
                  <el-form-item label="*入库日期">
                    <el-input  v-model="DetailedData.RKRQ" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="*启用日期">
                    <el-input  v-model="DetailedData.QYRQ" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="*国标码">
                    <el-input  v-model="DetailedData.GBM" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="*财务分类名称">
                    <el-input  v-model="DetailedData.CWFLMC" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="*已提折旧">
                    <el-input  v-model="DetailedData.YTZJ" :readonly="true"><template slot="append">￥</template></el-input>
                  </el-form-item>
                  <el-form-item label="*净值">
                    <el-input  v-model="DetailedData.JZ" :readonly="true"><template slot="append">￥</template></el-input>
                  </el-form-item>
                  <el-form-item label="备注" :readonly="true">
                    <el-input
                          type="textarea"
                          :autosize="{ minRows:5 , maxRows: 10}"
                          placeholder="请输入内容"
                          maxlength="50"
                          show-word-limit
                          v-model="DetailedData.BZ">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>    
          </el-card>
          </el-form>
        </el-col>
      </el-col>
      <el-col style="height:100%;" :xs="24" :sm="24" :md="12" :lg="12">
        <simple-panel 
        v-show="SwitchingPoint2"
        :panelTitle="'收费项目信息'" 
        :hasToolbar="true">
          <template slot="toolbar">
            <el-button v-show="authorities.save" style="margin:7px 15px;" size="mini" @click="onSave" type="warning">关联</el-button>
            <grid-search 
            :tableColumns="FeeLtemsColumns" 
            @searching="onSearching2('FeeLtems',$event)"></grid-search>
          </template>
          <template slot="main">
            <el-table ref="FeeLtemsTable" :data="FeeLtemsData" :height="665" style="width: 100%" size="medium"
            order stripe border
            @selection-change="onSelectionChange('FeeLtems',$event)">
              <el-table-column type="selection" width="50" fixed="left"></el-table-column>
              <el-table-column label="" type="index" width="50" fixed="left"></el-table-column>
              <template v-for="(col, index) in FeeLtemsColumns">
                <el-table-column v-if="!col.hidden" :key="index" :prop="col.prop" :label="col.label" :width="col.width"
                :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                  <template slot-scope="scope">
                    <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                    </span>
                    <span v-else v-text="scope.row[col.prop]">
                    </span>
                  </template>
                </el-table-column>
              </template>
              <el-table-column label="操作" width="60" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="onEditRange(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </simple-panel>
        <el-col v-show="!SwitchingPoint2">
          <el-card style="background-color: #DCDFE6;"> 
            <span style="font-weight:bold;">收费项目信息详情</span>
            <el-button plain size="mini" style="float:right" 
              @click="SwitchingPoint2 = !(SwitchingPoint2);">返回
            </el-button> 
          </el-card>
          <el-form ref="DetailedData2" 
          :model="DetailedData2"  
          label-position="right" 
          label-width="105px" 
          size="mini" 
          status-icon>
          <el-card style="width: 100%;height:600px;">
            <el-card>
              <el-form-item label="自定义编号">
                <el-input  v-model="DetailedData2.SFXMBHZDY" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input  v-model="DetailedData2.SFXMMC" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="单价">
                <el-input  v-model="DetailedData2.SFXMDH" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="有效否">
                <el-switch
                  v-model="DetailedData2.SFXMYXF"
                  disabled
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="备注" :readonly="true">
                <el-input
                      type="textarea"
                      :autosize="{ minRows:3 , maxRows: 5}"
                      placeholder="请输入内容"
                      maxlength="50"
                      show-word-limit
                      v-model="DetailedData2.SFXMBZ">
                </el-input>
              </el-form-item>
            </el-card>    
          </el-card>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import TablePanel from "@/components/basic/TablePanel";
import SimplePanel from "@/components/basic/SimplePanel";
import GridSearch from "@/components/basic/GridSearch";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import {
  trueFalseRenderer,
  findRowsByKeys
} from "@/utils/tableutils.js";

//meta info
var Equipment = "Equipment";// 表格名称
var FeeLtems = "FeeLtems";
var columnsAttr = "Columns";// 列
var dataAttr = "Data";// 数据
var selectionAttr = "Selection";// 选中
var dlgVisibleAttr = "DlgVisible";// 对话框
var formAttr = "Form";
var recordAttr = "Record";// 表单模型
var rulesAttr = "Rules";// 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// -列
var EquipmentColumns = [
  {
    prop: "SBFLBH",
    label: "设备编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SBMC",
    label: "设备名称",
  },
  {
    prop: "ZBSJ",
    label: "装备时间",
    outOfSearch:true,
    hidden: true,
    type:"date",
  },
  {
    prop: "BXSJ",
    label: "保修时间",
    outOfSearch:true,
    hidden: true,
    type:"date",
  },
  {
    prop: "ZRR",
    label: "责任人",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "FZDD",
    label: "放置地点",
  },
  {
    prop: "BZ",
    label: "备注",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "WXGCS",
    label: "维修工程师",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "WXGCS2",
    label: "维修工程师2",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "YQBH",
    label: "仪器编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "GDZCBH",
    label: "固定资产编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "YDAH",
    label: "医院档案号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "BDAH",
    label: "资产管理部档案号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "BMBH",
    label: "部门编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "CP",
    label: "厂牌",
    hidden: true,
  },
  {
    prop: "GGXH",
    label: "规格型号",
  },
  {
    prop: "DJ",
    label: "单价",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SBZT",
    label: "设备状态",
    width:80,
  },
  {
    prop: "IMGPATH",
    label: "设备图片路径",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "ERWEIMAPATH",
    label: "二维码路径",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "YXF",
    label: "有效否",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SHLXR",
    label: "售后联系人",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SHLXDH",
    label: "售后联系电话",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "CDCJ",
    label: "产地厂家",
    hidden: true,
  },
  {
    prop: "YZ",
    label: "*原值",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "RKRQ",
    label: "*入库日期",
    outOfSearch:true,
    hidden: true,
    type:"date",
  },
  {
    prop: "QYRQ",
    label: "*启用日期",
    outOfSearch:true,
    hidden: true,
    type:"date",
  },
  {
    prop: "GBM",
    label: "*国标码",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "CWFLMC",
    label: "*财务分类名称",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "YTZJ",
    label: "*已提折旧",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "JZ",
    label: "*净值",
    outOfSearch:true,
    hidden: true,
  }
];

// -列
var FeeLtemsColumns = [
  {
  prop: "SFXMBH",
  label: "收费项目编号",
  outOfSearch:true,
  hidden: true,
  }, 
  {
    prop: "SFXMBHZDY",
    label: "自定编号",
  },
  {
    prop: "SFXMMC",
    label: "名称",
  },
  {
    prop: "SFXMDH",
    label: "单价",
  },
  {
    prop: "SFXMBZ",
    label: "备注",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SFXMYXF",
    label: "有效否",
    outOfSearch:true,
    hidden: true,
  },
];


export default {
  // 使用其他子组件
  components: {
    "table-panel": TablePanel,
    "simple-panel":SimplePanel,
    "grid-search": GridSearch
  },
  methods:{
    onSearching: function(tname, params) {// 查询
      var me = this;
      let url = "/static/data/EquipmentFeeItems.json";// /static/data/EquipmentFeeItems.json      jcJsxxb

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              me[tname+totalNumAttr] = resp.data.total;// 分页-总数

              me[tname+totalNumAttr] = resp.data.total;// 分页-总数
              this.pageSize = resp.data.limit;//每页数量
              me[tname+curPageAttr] = resp.data.offset;//起始页    results
            }
        });
      }

    },
    onSearching2: function(tname, params) {// 查询-右部分
      var me = this;
      let url = "/static/data/EquipmentFeeItems2.json";// /static/data/DepartmentFeeItems.json      jcJsxxb

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              // // me[tname+totalNumAttr] = resp.data.total;// 分页-总数

              // me[tname+totalNumAttr] = resp.data.total;// 分页-总数
              // this.pageSize = resp.data.limit;//每页数量
              // me[tname+curPageAttr] = resp.data.offset;//起始页    results
            }
        });
      }

    },
    ondetails: function(tname, row) {// 详情
      var me = this;
      me[tname + dlgVisibleAttr] = true;
      me[tname + recordAttr] = row;
      this.SwitchingPoint = !(this.SwitchingPoint);
      this.DetailedData = row
      this.url = this.DetailedData.IMGPATH
    },
    onEditRange: function(row) {// 详情-右部分
      this.SwitchingPoint2 = !(this.SwitchingPoint2);
      this.DetailedData2 = row
    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      if(tname === Equipment){
        // 缓存记录，按照设备信息编号，查询对应的选中权限节点数组
        me[tname+selectionAttr] = data;
        // 先清空上一次选中的
        me.$refs.FeeLtemsTable.clearSelection();
        // 然后加载新的关联并显示 /static/data/system/EquipmentFeeLtemsSelected.json
        me.getRequest("/sysJsxxb/SBFLBHs",{
          SBFLBH:data.SBFLBH
        }).then((resp)=>{
          if(resp.status == 200){
            // 按照SBFLBH-设备信息编号-选中对应记录 resp.data.data
            let keys = me.arrUtil.transObjArrToSimpleArr(resp.data,"SBFLBH");
            let rows = findRowsByKeys(me[FeeLtems+dataAttr],"SBFLBH", keys);
            rows.forEach(row => {
              me.$refs.FeeLtemsTable.toggleRowSelection(row, true);
            });

          }else {
            me.$message.error("服务器读取错误，没有找到该设备所关联的收费项目！");
          }
        });
      }else if(tname === FeeLtems){
        me[tname+selectionAttr] = data;
      }

    },
    onConfirm: function(tname) {// 对话框-确认
      let me = this;
      // 发送请求 /jcJsxxb

        this.$notify.info({
          title: '成功',
          message: '采集器修改成功'
        });
           
        me.postRequest("/api/VideoModify",me[Equipment + recordAttr]).then(resp => {
          if (resp.status == 200) {
            me.$message.success("提交成功！");

            //最后，隐藏对话框
            me[tname + dlgVisibleAttr] = false;
            this.SwitchingPoint = !(this.SwitchingPoint);
            me.onSearching(Equipment, {});// 重新查一遍
          } else {
            me.$message.error("服务器发生错误，代码：" + resp.status);
          }
        });
    },
    onSave:function() {// 保存关联
      var me = this;
      var FeeLtemssSelected = me[FeeLtems+selectionAttr];// 选中的收费项目
      var EquipmentSelected = me[Equipment+selectionAttr];// 选中的设备信息
      // 验证
      if(FeeLtemssSelected.length < 1){
        me.$message.warning("请至少选择一个收费项目！");
        return;
      }
      console.log("EquipmentSelected=",EquipmentSelected);
      if(!EquipmentSelected.SBFLBH || EquipmentSelected.SBFLBH == ""){
        me.$message.warning("请选择一个设备！");
        return;
      }
      console.log("FeeLtemssSelected=",FeeLtemssSelected);
      let SBFLBHArr = [];
      for (let i = 0; i < FeeLtemssSelected.length; i++) {
        const FeeLtems = FeeLtemssSelected[i];
        SBFLBHArr.push(FeeLtems.SBFLBH);
      }

      // 发送数据 /static/data/testSuc.json
      me.postRequest("/jcYhxxb/sysYhjsglxxb",{
        SBFLBH:EquipmentSelected.SBFLBH,
        SBFLBHs:SBFLBHArr.toString()
      }).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success(resp.data.msg);
        } else{
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    }
  },
  data(){
    return {
      authorities:{
        save:true,
        details:true,
      },// 权限控制
      [Equipment+columnsAttr]: EquipmentColumns,// 角色表格-列
      [Equipment+dataAttr]: [],// 角色表格的数据
      [Equipment+selectionAttr]:{},// 当前选中的角色
      [FeeLtems+columnsAttr]: FeeLtemsColumns,// 角色表格-列
      [FeeLtems+dataAttr]: [],// 角色表格的数据
      [FeeLtems+selectionAttr]:[],// 当前选中的角色
      [Equipment+curPageAttr]:1,
      [Equipment+totalNumAttr]:0,
      [Equipment+qParamAttr]:{},
      pageSize:100,// 每页数量

      SwitchingPoint:true,//表单列表之间-切换控制
      DetailedData:{},//存储表单中的数据

      SwitchingPoint2:true,//表单列表之间-切换控制-右边部分
      DetailedData2:{},//存储表单中的数据-右边部分

      url: '',
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 一开始就加载角色列表
    // me.getRequest("/static/data/EquipmentFeeItems2.json",{
    // }).then((resp)=>{
    //   if(resp.status==200) {
    //     me[FeeLtems+dataAttr] = resp.data.results;
    //   }else{
    //     me.$message.error("服务器发生错误，代码：" + resp.status);
    //   }
    // });
    me.onSearching2(FeeLtems,{});

    me.onSearching(Equipment,{});
  }
}
</script>
<style lang="scss">

.components-system-EquipmentFeeLtems{
  height:100%;
}

</style>
